Component({
  properties: {
    //属性值可以在组件使用时指定
    isCanDraw: {
      type: Boolean,
      value: false,
      observer(newVal, oldVal) {
        newVal && this.drawPic()
      }
    }
  },
  data: {
    imgDraw: {}, //绘制图片的大对象
    sharePath: '', //生成的分享图
    visible: false
  },
  methods: {
    handleClose() {
      this.setData({
        visible: false
      })
      this.triggerEvent('close')
    },
    drawPic() {
      if (this.data.sharePath) { //如果已经绘制过了本地保存有图片不需要重新绘制
        this.setData({
          visible: true
        })
        this.triggerEvent('initData')
        return
      }
      wx.showLoading({
        title: '生成中'
      })
      this.setData({
        imgDraw: {
          width: '2560rpx',
          height: '4032rpx',
          background: 'https://miniprogram.nr0.top/img/songPost/background.png',
          views: [{
            type: 'image',
            url: wx.getStorageSync('avatarUrl') || 'https://miniprogram.nr0.top/img/songPost/logo.png',
            css: {
              top: '720rpx',
              left: '980rpx',
              width: '600rpx',
              height: '600rpx',
              borderRadius: '360rpx'
            }
          }, {
            type: 'image',
            url: 'https://miniprogram.nr0.top/img/songPost/qrcode.jpg',
            css: {
              top: '2672rpx',
              left: '1532rpx',
              width: '714rpx',
              height: '714rpx'
            }
          }, {
            type: 'text',
            text: wx.getStorageSync('nickName') || '真光电台',
            css: {
              top: '2420rpx',
              fontSize: '80rpx',
              maxLines: '1',
              left: '1280rpx',
              width: '1000rpx',
              textAlign: 'right',
              color: '#7B7B7B'
            }
          }, {
            type: 'text',
            text: '点歌状态：' + wx.getStorageSync('songState'),
            css: {
              top: '2420rpx',
              fontSize: '80rpx',
              left: '280rpx',
              width: '1000rpx',
              textAlign: 'left',
              color: '#7B7B7B'
            }
          }, {
            type: 'text',
            text: wx.getStorageSync('songTitle') || '加载失败，请重试',
            css: {
              top: '1400rpx',
              fontSize: '164rpx',
              maxLines: '2',
              lineHeight: '196rpx',
              left: '280rpx',
              width: '2000rpx',
              textAlign: 'center',
              color: '#000000'
            }
          }, {
            type: 'text',
            text: wx.getStorageSync('songSinger') || '加载失败，请重试',
            css: {
              top: '1880rpx',
              fontSize: '120rpx',
              maxLines: '2',
              lineHeight: '160rpx',
              left: '280rpx',
              width: '2000rpx',
              textAlign: 'center',
              color: '#000000'
            }
          }]
        }


      })
    },
    onImgErr(e) {
      wx.hideLoading()
      wx.showToast({
        title: '生成分享图失败，请刷新页面重试'
      })
    },
    onImgOK(e) {
      wx.hideLoading()
      this.setData({
        sharePath: e.detail.path,
        visible: true,
      })
      //通知外部绘制完成，重置isCanDraw为false
      this.triggerEvent('initData')
    },
    preventDefault() {},
    // 保存图片
    handleSavePhoto() {
      wx.showLoading({
        title: '正在保存...',
        mask: true
      })
      wx.saveImageToPhotosAlbum({
        filePath: this.data.sharePath,
        success: () => {
          wx.showToast({
            title: '保存成功'
          })
          setTimeout(() => {
            this.setData({
              visible: false
            })
            this.triggerEvent('close')
          }, 300)
        },
        fail: () => {
          wx.getSetting({
            success: res => {
              let authSetting = res.authSetting
              if (!authSetting['scope.writePhotosAlbum']) {
                wx.showModal({
                  title: '提示',
                  content: '您未开启保存图片到相册的权限，请点击确定去开启权限！',
                  success(res) {
                    if (res.confirm) {
                      wx.openSetting()
                    }
                  }
                })
              }
            }
          })
          setTimeout(() => {
            wx.hideLoading()
            this.setData({
              visible: false
            })
            this.triggerEvent('close')
          }, 300)
        }
      })
    }
  }
})